<template>
	<div class="info">
		<table border="1" cellspacing="0px">
			<thead>
				<th>用户名</th>
				<th>操作</th>
			</thead>
			<tbody>
				<tr v-for="(item,index) in users">
					<td class="inf" @click="LookInfo(index,item.nickname)">{{ item.nickname }}</td>
					<td class="op">
						<button @click="Cancel(index,item.nickname)">注销</button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
	export default{
		name:'UserInfo',
		data() {
			return{
			   users:[
			   	{
			   		nickname:'用户1',
			   		acountname:'用户1账号'
			   	},
			   	{
			   		nickname:'用户2',
			   		acountname:'用户2账号'
			   	},
			   	{
			   		nickname:'用户3',
			   		acountname:'用户3账号'
			   	}
			   ]
			}
		},
		methods:{
			LookInfo(index,nickname){
				console.log('点击了 ',index,'  ',nickname);
				this.$bus.$emit("getNickname",nickname);
			},
			Cancel(index,nickname){
				console.log('注销  ',index,'  ',nickname);

				this.users.splice(index,1);
			}
		}
	}
</script>

<style scoped>
	.info{
		flex: 2;
		height: 100%;
		
		overflow: auto;
		
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		
		background-color: white;
		border: 0.7px solid rgb(235, 235, 235);
		border-radius: 5px 5px;
		box-shadow: -2px -2px 0.5em gray;
	}
	table{
		margin-top: 1.25rem;
		width: 90%;
	}
	thead{
		height: 2.5rem;
		background-color: orange;
	}
	td{
		height: 1.875rem;
	}
	tr :hover{
		background-color: royalblue;
	}
	button{
		width: 80%;
		height: 90%;
		background-color: red;
		
		color: white;
		font-size: 1.125rem;
	}
</style>